<template>
  <div class="test-page">
    <h1>流程设计器测试页面</h1>
    <div class="test-content">
      <el-button type="primary" @click="testBasicFunctionality">测试基础功能</el-button>
      <el-button @click="testStore">测试Store</el-button>
      <el-button @click="testValidation">测试验证</el-button>
      
      <div class="test-results">
        <h3>测试结果：</h3>
        <div v-for="result in testResults" :key="result.id" class="result-item">
          <el-tag :type="result.success ? 'success' : 'danger'">
            {{ result.test }}: {{ result.success ? '成功' : '失败' }}
          </el-tag>
          <span v-if="result.message">{{ result.message }}</span>
        </div>
      </div>

      <div class="store-state">
        <h3>Store状态：</h3>
        <pre>{{ JSON.stringify(processStore.currentProcess, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElTag, ElButton } from 'element-plus'

// 声明变量
let processStore: any = null
const testResults = ref<any[]>([])

// 测试函数
const testBasicFunctionality = () => {
  try {
    addTestResult('基础功能', true, '页面正常加载')
  } catch (error) {
    addTestResult('基础功能', false, String(error))
  }
}

const testStore = async () => {
  try {
    
    // 动态导入Store
    const { useProcessDesignerStore } = await import('@/stores/workflow/processDesigner')
    processStore = useProcessDesignerStore()
    
    // 测试初始化
    processStore.initProcess()
    
    // 测试添加节点
    const node = processStore.addNode('START', { x: 100, y: 100 })
    
    addTestResult('Store功能', true, `节点ID: ${node.id}`)
  } catch (error) {
    addTestResult('Store功能', false, String(error))
  }
}

const testValidation = () => {
  try {
    if (!processStore) {
      addTestResult('验证功能', false, 'Store未初始化')
      return
    }
    
    const errors = processStore.validateProcess()
    addTestResult('验证功能', true, `验证错误数量: ${errors.length}`)
  } catch (error) {
    addTestResult('验证功能', false, String(error))
  }
}

const addTestResult = (test: string, success: boolean, message?: string) => {
  testResults.value.push({
    id: Date.now(),
    test,
    success,
    message
  })
}

onMounted(() => {
  testBasicFunctionality()
})
</script>

<style scoped>
.test-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-content {
  margin-top: 20px;
}

.test-results {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.result-item {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.store-state {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
}

.store-state pre {
  font-size: 12px;
  color: #374151;
  max-height: 300px;
  overflow-y: auto;
}
</style>
